<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui的数据表格中显示倒计时</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/css/layui.css"  media="all">
</head>
<body>
<!-- 数据表格 -->
<table class="layui-hide" id="demo"></table>
<script src="../static/layui.js" charset="utf-8"></script>
<script>

    var data = {
        "code": 0,
        "data": [
            {
                "name": "事假",//文件名称
                "id": 146, //文件ID
                "pushTime": 1611714619000 //提交申请的时间，毫秒值表示
            },
            {
                "name": "请假条",
                "id": 133,
                "pushTime": 1611711730000
            },
            {
                "name": "请假条",
                "id": 142,
                "pushTime": 1611644857000
            },
            {
                "name": "病假",
                "id": 145,
                "pushTime": 1611624655000
            }
        ],
        "msg": "已查询到请假申请数据！",
        "count": 4
    };


    layui.use(['util', 'table'], function(){
        $ = layui.jquery;
        var  util = layui.util
            ,table = layui.table;

        //展示 文件数据
        table.render({
            elem: '#demo'
            // ,url: 'http://w.x.y.z:8080/file/list'
            ,data: data
            ,cols: [[ //标题栏
                {field: 'id', title: 'ID', align:"center"}
                ,{field: 'name', title: '文件名称', align:"center"}
                ,{field: 'pushTime', title: '申请时间', width: 220, align:"center"
                    ,templet: function(a){
                        var longstr = a.pushTime;
                        // datetimeFormat()将毫秒值转为时间字符串，代码在下方112-177行
                        return datetimeFormat(longstr);
                    }
                    ,align:"center"
                }
                ,{field: 'Countdown', title: '倒计时',
                    templet: function (a) {
                        // 在提交时间上 延长3天, 再把 毫秒 转为 秒
                        var endTime = Math.floor((a.pushTime + 3*24*60*60*1000) / 1000);
                        // 计算 剩下的秒，即留给审批的时间
                        var t = endTime - Math.floor(new Date().getTime() / 1000);
                        // 设置每一条数据唯一的key
                        var key = 'key_' + a.id;
                        // 判断是否逾期
                        if(t <= 0){
                            //已逾期，直接返回，提示已逾期
                            return `<label  id=${key}>已逾期</label>`;
                        }
                        //未逾期 > 开始处理剩余时间，将秒转为n日n时n分n秒的形式，代码在下方88-108行
                        var left_time =  secondToStr(t);
                        var html = `<label id=${key} style="color: red;">${left_time}</label>`;
                        addTask(key, function () {
                            t--;
                            var left =  secondToStr(t);
                            $('#' + key).text(left);
                            if (t == 0) {
                                //倒计时结束，删除定时任务
                                $('#' + key).text("已逾期");
                                delTask(key);
                                // 可根据情况，进行逾期之后的操作
                                //...........
                            }
                        });
                        return html;
                    }
                }
            ]]
        });
        /*  倒计时相关 ↓↓↓ */
        // 该map可以定义在最上面
        var tasks = new Map();
        // 定时计时任务，这里是1秒执行一次
        setInterval(function () {
            for (var key in tasks) {
                tasks[key]();
            }
        }, 1000)
        // 添加定时任务
        function addTask(key, value) {
            if (typeof value === "function") {
                tasks[key] = value;
            }
        }
        // 删除定时任务
        function delTask(task) {
            delete tasks[task];
        }
        // 剩余秒 转化为 剩余日时分秒
        function secondToStr(t){
            //日
            var left_day = parseInt(t / ( 60 * 60 * 24));
            //时
            var left_hour = parseInt((t % ( 60 * 60 * 24)) / (60 * 60));
            if (left_hour < 10) {
                left_hour = "0" + left_hour;
            }
            //分
            var left_minute = parseInt((t%3600) /60);
            if (left_minute < 10) {
                left_minute = "0" + left_minute;
            }
            //秒
            var left_second = t % 60;
            if (left_second < 10) {
                left_second = "0" + t % 60;
            }
            return left_day+"天 "+left_hour+"时 "+left_minute+"分 "+left_second+"秒";
        }
        /*  倒计时相关 结束 ↑↑↑ */
    });
</script>
<script>
    /*
	 * 时间格式化工具
	 * 把Long类型的1527672756454日期还原yyyy-MM-dd 00:00:00格式日期
	 */
    function datetimeFormat(longTypeDate) {
        if(longTypeDate==null){
            return "";
        }
        var dateTypeDate = "";
        var date = new Date();
        date.setTime(longTypeDate);
        dateTypeDate += date.getFullYear();   //年
        dateTypeDate += "-" + getMonth(date); //月
        dateTypeDate += "-" + getDay(date);   //日
        dateTypeDate += "&nbsp;" + getHours(date);   //时
        dateTypeDate += ":" + getMinutes(date);     //分
        dateTypeDate += ":" + getSeconds(date);     //秒
        return dateTypeDate;
    }
    //返回  月份
    function getMonth(date) {
        var month = "";
        month = date.getMonth() + 1; //getMonth()得到的月份是0-11
        if (month < 10) {
            month = "0" + month;
        }
        return month;
    }
    //返回 日期
    function getDay(date) {
        var day = "";
        day = date.getDate();
        if (day < 10) {
            day = "0" + day;
        }
        return day;
    }
    //小时
    function getHours(date) {
        var hours = "";
        hours = date.getHours();
        if (hours < 10) {
            hours = "0" + hours;
        }
        return hours;
    }
    //分
    function getMinutes(date) {
        var minute = "";
        minute = date.getMinutes();
        if (minute < 10) {
            minute = "0" + minute;
        }
        return minute;
    }
    //秒
    function getSeconds(date) {
        var second = "";
        second = date.getSeconds();
        if (second < 10) {
            second = "0" + second;
        }
        return second;
    }
</script>
</body>
</html>
